<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demo</title>
    <link rel="stylesheet" href="src/css/layui.css">
</head>
<body>

    <table id="example1"></table>
    <table id="example2"></table>

<script src="src/layui.js"></script>
<script type="text/javascript">
    layui.config({
        base: 'src/extensions/' //假设这是你存放拓展模块的根目录
    });
    layui.use(['table','casualSearch','jquery'],function(){
        var table = layui.table;
        var casualSearch = layui.casualSearch;
        var $ = layui.jquery;

        //第一个实例
        var example1Data = [{"id":10000,"username":"user-0","sex":"女","city":"城市-0","sign":"签名-0","experience":255,"logins":24,"wealth":82830700,"classify":"作家","score":57},{"id":10001,"username":"user-1","sex":"男","city":"城市-1","sign":"签名-1","experience":884,"logins":58,"wealth":64928690,"classify":"词人","score":27},{"id":10002,"username":"user-2","sex":"女","city":"城市-2","sign":"签名-2","experience":650,"logins":77,"wealth":6298078,"classify":"酱油","score":31},{"id":10003,"username":"user-3","sex":"女","city":"城市-3","sign":"签名-3","experience":362,"logins":157,"wealth":37117017,"classify":"诗人","score":68},{"id":10004,"username":"user-4","sex":"男","city":"城市-4","sign":"签名-4","experience":807,"logins":51,"wealth":76263262,"classify":"作家","score":6},{"id":10005,"username":"user-5","sex":"女","city":"城市-5","sign":"签名-5","experience":173,"logins":68,"wealth":60344147,"classify":"作家","score":87},{"id":10006,"username":"user-6","sex":"女","city":"城市-6","sign":"签名-6","experience":982,"logins":37,"wealth":57768166,"classify":"作家","score":34},{"id":10007,"username":"user-7","sex":"男","city":"城市-7","sign":"签名-7","experience":727,"logins":150,"wealth":82030578,"classify":"作家","score":28},{"id":10008,"username":"user-8","sex":"男","city":"城市-8","sign":"签名-8","experience":951,"logins":133,"wealth":16503371,"classify":"词人","score":14},{"id":10009,"username":"user-9","sex":"女","city":"城市-9","sign":"签名-9","experience":484,"logins":25,"wealth":86801934,"classify":"词人","score":75}];
        var example1 = table.render({
            elem: '#example1',
            height: '400',
            toolbar: 'default', //开启工具栏
            // page: true, //开启分页
            // defaultToolbar: ['filter'],
            data : example1Data,
            loading:true,
            cellMinWidth : '105',
            cols: [[ //表头
                {field:'id',checkbox : true},
                {field: 'id', title: 'ID'},
                {field: 'username', title: '用户名',},
                {field: 'sex', title: '性别'},
                {field: 'city', title: '城市'},
                {field: 'sign', title: '签名'},
                {field: 'experience', title: '积分'},
                {field: 'wealth', title: '评分'},
                {field: 'classify', title: '职业'},
                {field: 'score', title: '财富'}
            ]],
            id : 'example1',
            done : function(){
                casualSearch.render({
                    table : this,
                    title : '搜索1'
                })
            }
        });

        //第一个实例
        var example2Data = [
            {
                "id": "10001",
                "username": "杜甫",
                "email": "xianxin@layui.com",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "点击此处，显示更多。当内容超出时，点击单元格会自动显示更多内容。",
                "experience": "116",
                "ip": "192.168.0.8",
                "logins": "108",
                "joinTime": "2016-10-14"
            },
            {
                "id": "10002",
                "username": "李白",
                "email": "xianxin@layui.com",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "君不见，黄河之水天上来，奔流到海不复回。 君不见，高堂明镜悲白发，朝如青丝暮成雪。 人生得意须尽欢，莫使金樽空对月。 天生我材必有用，千金散尽还复来。 烹羊宰牛且为乐，会须一饮三百杯。 岑夫子，丹丘生，将进酒，杯莫停。 与君歌一曲，请君为我倾耳听。(倾耳听 一作：侧耳听) 钟鼓馔玉不足贵，但愿长醉不复醒。(不足贵 一作：何足贵；不复醒 一作：不愿醒/不用醒) 古来圣贤皆寂寞，惟有饮者留其名。(古来 一作：自古；惟 通：唯) 陈王昔时宴平乐，斗酒十千恣欢谑。 主人何为言少钱，径须沽取对君酌。 五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。",
                "experience": "12",
                "ip": "192.168.0.8",
                "logins": "106",
                "joinTime": "2016-10-14",
                "LAY_CHECKED": true
            },
            {
                "id": "10003",
                "username": "王勃",
                "email": "xianxin@layui.com",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "65",
                "ip": "192.168.0.8",
                "logins": "106",
                "joinTime": "2016-10-14"
            },
            {
                "id": "10004",
                "username": "李清照",
                "email": "xianxin@layui.com",
                "sex": "女",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "666",
                "ip": "192.168.0.8",
                "logins": "106",
                "joinTime": "2016-10-14"
            },
            {
                "id": "10005",
                "username": "冰心",
                "email": "xianxin@layui.com",
                "sex": "女",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "86",
                "ip": "192.168.0.8",
                "logins": "106",
                "joinTime": "2016-10-14"
            },
            {
                "id": "10006",
                "username": "贤心",
                "email": "xianxin@layui.com",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "12",
                "ip": "192.168.0.8",
                "logins": "106",
                "joinTime": "2016-10-14"
            },
            {
                "id": "10007",
                "username": "贤心",
                "email": "xianxin@layui.com",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "16",
                "ip": "192.168.0.8",
                "logins": "106",
                "joinTime": "2016-10-14"
            },
            {
                "id": "10008",
                "username": "贤心",
                "email": "xianxin@layui.com",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "106",
                "ip": "192.168.0.8",
                "logins": "106",
                "joinTime": "2016-10-14"
            }
        ];
        var example2 = table.render({
            elem: '#example2',
            height: '400',
            // toolbar: 'default', //开启工具栏
            // page: true, //开启分页
            // defaultToolbar: ['filter'],
            data : example2Data,
            loading:true,
            cellMinWidth : '105',
            cols: [[ //表头
                {field:'id',checkbox : true},
                {field: 'id', title: 'ID'},
                {field: 'username', title: '用户名',},
                {field: 'email', title: '邮箱'},
                {field: 'sex', title: '性别'},
                {field: 'city', title: '城市'},
                {field: 'sign', title: '签名'},
                {field: 'experience', title: '积分'},
                {field: 'ip', title: 'ip'},
                {field: 'logins', title: '登入次数'},
                {field: 'joinTime', title: '加入时间'}
            ]],
            id : 'example2',
            done : function(){
                casualSearch.render({
                    table : this,
                    title : '搜索2'
                })
            }
        });
    })
</script>
</body>
</html>